<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <el-table
            :data="list"
            style="width: 100%"

            class="card-table"
            :border="false"
            stripe
            :default-sort="{ prop: 'five' }"
          >
            <el-table-column
              type="index"
              label="序号"
              width="50"
              align="center"
            />

            <el-table-column label="头像" width="80" align="center">
              <template slot-scope="scope">
                <img
                  width="35"
                  height="35"
                  style="border-radius: 50%"
                  :src="
                    scope.row.avatar
                      ? scope.row.avatar
                      : require('../../../assets/mr.png')
                  "
                  alt=""
                  srcset=""
                >
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="name"
              label="姓名"
              width="150"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              prop="englishName"
              label="英文姓名"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              prop="gender"
              label="性别"
              align="center"
              width="50"
              :formatter="genderFormat"
            />
            <el-table-column
              show-overflow-tooltip
              prop="mobile"
              label="电话"
              align="center"
              width="150"
            />
            <el-table-column
              show-overflow-tooltip
              prop="houseNum"
              label="关联房产"
              align="center"
              width="80"
            >
              <template slot-scope="scope">
                <router-link
                  :to="{
                    path: '/house/page',
                    query: { operator: scope.row.name },
                  }"
                  class="linkBtn"
                >
                  <span class="houseNum fzClocd">{{ scope.row.houseNum }}</span>
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="video"
              label="视频"
              align="center"
              width="80"
            >
              <template v-if="scope.row.video != ''" slot-scope="scope">
                <i
                  class="fa fa-play-circle"
                  aria-hidden="true"
                  style="color: #a2a2a2"
                  @click="showDigo(scope.row)"
                />
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="appAccount"
              label="系统账号"
              align="center"
              max-width="150"
            />
            <el-table-column
              show-overflow-tooltip
              prop="introduce"
              label="个人介绍"
              align="center"
              min-width="100"
            />
            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="scope">
                <!-- <el-button type="text" size="small">查看</el-button> -->
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(scope.row)"
                >编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :v-show="total > 0"
            background
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>

    <!---->
    <!---->
    <el-dialog
      title=""
      :close-on-click-modal="false"
      width="647px"
      custom-class="myDigo inputTop"
      :show-close="false"
      :visible.sync="show"
    >
      <h2>{{ txt }} <i class="el-icon-close" @click="close" /></h2>
      <!---->
      <div class="digoDiv">
        <el-form
          ref="editForm"
          :model="editForm"
          :rules="editFormRule"
          label-width="85px"
          class="formDiv"
        >
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="12" :sm="12" :lg="12">
              <el-form-item label="头像:">
                <Upload
                  v-model="editForm.avatar"
                  class="bd"
                  :urls="editForm.avatar"
                  :maxcount="1"
                  title=""
                  format="png,jpg,jpeg"
                  @getImage="changeDetailImage"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12">
              <el-form-item label="视频:">
                <!-- <Upload class="bd" v-model="editForm.avatar" :urls="editForm.avatar" :maxcount=1 title="" format="png,jpg,jpeg" @getImage="changeDetailImage" /> -->
                <Upload6
                  v-model="editForm.video"
                  class="bd fileUp"
                  :urls="editForm.video"
                  :maxcount="1"
                  title=""
                  format="mp4"
                  @getImage="changeDetailVideo"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="姓名:" :required="true">
                <el-input v-model="editForm.name" placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="英文姓名:" :required="true">
                <el-input
                  v-model="editForm.englishName"
                  placeholder="请输入英文姓名"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <el-form-item label="性别:">
                <el-select
                  v-model="editForm.gender"
                  placeholder="请选择性别"
                  class="w100"
                >
                  <el-option
                    v-for="item in genderOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :lg="12" class="">
              <!-- <el-form-item label="生日:">
                <el-date-picker
                  v-model="editForm.birthday"
                  type="date"
                  style="width: 200px;"
                  placeholder="请选择生日"
                />
              </el-form-item> -->
              <el-form-item label="电话:">
                <el-input v-model="editForm.mobile" placeholder="请输入电话" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-form-item label="标签:" :required="true">
              <div v-for="(item, index) in divTag" :key="index" class="divTag">
                <el-col :xs="10" :sm="10" :lg="10" class="">
                  <el-input v-model="item.tags" placeholder="请输入标签" />
                </el-col>
                <i v-if="index == 0" @click="addTag">+</i>
                <i v-if="index >= 1" @click="removeTag(index)">-</i>
              </div>
            </el-form-item>
          </el-row>
          <el-row :xs="24" :sm="24" :lg="24">
            <el-col :xs="24" :sm="24" :lg="24" class="">
              <el-form-item label="个人介绍:" label-width="85px">
                <el-input
                  v-model="editForm.introduce"
                  type="textarea"
                  placeholder="请输入介绍"
                  maxlength="30"
                  show-word-limit
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <!---->
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          :disabled="disabled"
          @click="submitForm()"
        >确 认</el-button>
        <el-button class="grey-btn" @click="close">取 消</el-button>
      </div>
    </el-dialog>
    <!---->
    <!---->
  </div>
</template>

<script>
import { page, update } from '@/api/manager'
import Upload from '@/components/Upload/SingleImage'
import Upload6 from '@/components/Upload/SingleImage6'
import { genderOptions, ownerSource } from '@/utils/consts'
import { dateFormatRow, genderFormat } from '@/utils/common'
export default {
  components: { Upload, Upload6 },
  data() {
    return {
      disabled: true,
      genderFormat,
      genderOptions,
      txt: '修改运营',
      dateFormatRow,
      divTag: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      objMo: {
        show: false,
        title: '选择房产来源',
        width: '536px'
      },
      list: [],
      sizeForm: {},
      radio: 3,
      show: false,
      editForm: {
        id: undefined,
        name: null,
        source: null,
        gender: null,
        englishName: null,
        avatar: null,
        mobile: null,
        email: null,
        province: null,
        city: null,
        address: null,
        note: null,
        type: 2
      },
      editFormRule: {
        name: [{ required: true, message: '姓名必填', trigger: 'change' }],
        mobile: [{ required: true, message: '电话必填', trigger: 'change' }]
      }
    }
  },
  watch: {
    currentPage: {
      handler(newVal) {
        newVal && this.getList()
      }
    },
    pageSize: {
      handler(newVal) {
        newVal && this.getList()
      }
    },
    editForm: {
      handler(newVal, oldVal) {
        if (newVal.name && newVal.englishName) {
          if (this.divTag.length >= 1 && this.divTag[0].tags != '') {
            this.disabled = false
          } else {
            this.disabled = true
          }
        } else {
          this.disabled = true
        }
      },
      deep: true
    },
    divTag: {
      handler(val) {
        if (this.editForm.name != '' && this.editForm.englishName != '') {
          if (this.divTag.length >= 1 && this.divTag[0].tags != '') {
            this.disabled = false
          } else {
            this.disabled = true
          }
        } else {
          this.disabled = true
        }
      },
      deep: true
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.loading = true
      const query = { page: this.currentPage, limit: this.pageSize, type: 2 }
      page(query).then((response) => {
        this.list = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    addTag() {
      if (this.divTag[0].tags == '') {
        this.$notify.error({ message: '请填写标签' })
        return
      }
      this.divTag.push({ tag: '' })
    },
    removeTag(index) {
      this.divTag.splice(index, 1)
    },

    handleClick(row) {
      this.editForm = Object.assign({}, row)

      this.divTag = []
      if (this.editForm.tags.indexOf(',')) {
        this.editForm.tags.split(',').forEach((item) => {
          this.divTag.push({ tags: item })
        })
      } else {
        this.divTag.push({ tags: this.editForm.tags })
      }
      this.show = true
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    close() {
      this.show = false
    },
    save() {
      console.log('123')
    },
    houseTypeFormat(row) {},

    changeDetailImage(val) {
      console.log('val:' + val)
      this.editForm.avatar = val.toString()
    },
    changeDetailVideo(val) {
      console.log('val:' + val)
      this.editForm.video = val.toString()
    },
    submitForm() {
      var arr = []
      this.divTag.forEach((item) => {
        if (item.tags != '' && item.tags != null && item.tags != undefined) {
          arr.push(item.tags)
        }
      })
      this.editForm.tags = arr.join(',')
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.loading = true
          update(this.editForm).then((response) => {
            console.log(response)
            if (response.code === 200) {
              this.$notify.success({ message: '更新成功' })
              this.show = false
              this.$emit('getTable')
              this.divTag = [{ tags: '' }]
              this.editForm = {}
              this.editForm.type = 2
              this.getList()
            }
            this.loading = false
          })
        }
      })
    },
    srcTable(list) {
      page(list).then((response) => {
        this.list = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    showDigo(row) {
      if (row.video == '') {
        //  this.$notify.error({ message: '暂无视频' })
        return
      }
      this.$root.$children[0].showDialog({ title: '视频', url: row.video })
    }
  }
}
</script>

<style lang="scss" scoped>
.divTag i {
  display: inline-block;
  border-radius: 50%;
  margin-bottom: 20px;
  margin-left: 35px;
  color: #5ac6b7;
  border: 1px solid #5ac6b7;
  width: 24px;
  height: 24px;
  text-align: center;
  line-height: 20px;
  font-size: 20px;
}
.add {
  background: #5ac6b7;
  color: #fff;
  border: 0;
  border-radius: 2px;
}
::v-deep .el-table th.is-leaf,
::v-deep .el-table td,
::v-deep .el-table__body {
  border: 0;
}
::v-deep .el-table::before,
::v-deep .el-table__fixed-right::before {
  display: none;
}
::v-deep th {
  background: #f7f7f7;
  font-weight: normal;
  color: #101010;
}
.myDigo h2 {
  background: #343436;
}
::v-deep .myDigo .el-dialog__footer {
  background: #e5e9ed;
  padding-top: 15px;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  padding: 0;
}
::v-deep .el-dialog.myDigo .el-dialog__header {
  display: none;
}
.el-dialog.myDigo h2 {
  height: 58px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 39px;
  padding-right: 39px;
  color: #fff;
  font-size: 18px;
  padding-top: 0;
  margin-top: 0;
  overflow: hidden;
  font-weight: normal;
  font-family: "SourceHanSansSC-regular";
}
.el-dialog.myDigo h2 i {
  font-size: 26px;
  cursor: pointer;
}
::v-deep .el-dialog.myDigo .el-dialog__body {
  text-align: left;
}
.mtright {
  margin-right: 5px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 70px;
  height: 56px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item div.filediv {
  width: 100%;
  height: 100%;
}
::v-deep .el-upload--picture-card {
  width: 70px;
  height: 56px;
  line-height: 66px;
}
::v-deep .el-upload__text {
  line-height: initial;
  color: #cacaca;
  margin-top: -10px;
  font-size: 12px;
}
.right10 {
  margin-left: 10px;
}
.right20 {
  margin-left: 20px;
}
::v-deep .itxt label {
  font-weight: normal;
  font-size: 12px;
}
::v-deep .itxt {
  margin-bottom: 15px;
}
::v-deep .itxtactive label {
  color: #5ac6b7;
}
.borbtoonline {
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: -15px;
}
.bortopline {
  margin-top: 15px;
}
.borbtoonline .el-form-item {
  margin-bottom: 10px;
}
.formDiv {
  padding-left: 39px;
  padding-right: 39px;
}
.rowPda {
  padding-right: 10px;
}
</style>

